<template>
	<view class="content">
		<health-title @timeBack="timeBack" :borderBottom="false" height="100" Title="血压" :showWeek="false"></health-title>
		<view class="">
			<view class="chart-box">
				<view class="title _df" v-if="!isEmpty && dateType == '日'">
					<view class="num">
						{{topData.value}}
					</view>
					<view class="dw">
						mmHg
					</view>
					<view class="time">
						{{topData.createTime}}
					</view>
				</view>
				<view ref="chart" id="chart" class="chart" style="margin-top: -20rpx;margin-bottom: 0;">
					<view class="img" v-if="isEmpty">
						<image src="@/static/img/index/echart.png" mode=""></image>
						<view class="txt">
							暂无数据
						</view>
					</view>
					<l-echart ref="chartRef"></l-echart>
				</view>
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/tIcon1.png" mode=""></image>
					{{glTitle}}
				</view>
				<view class="list">
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.avgSs}}
							</view>
							<view class="dw">
								mmHg
							</view>
						</view>
						<view class="info" v-if="infoData.avgSs != 0 && infoData.avgSs != '' && infoData.avgSs != null">
							平均收缩压<u-tag class="ml15" :text="infoData.avgSsStatus==0?'偏低':infoData.avgSsStatus==1?'偏高':'正常'" :type="infoData.avgSsStatus==0?'warning':infoData.avgSsStatus==1?'error':'primary'" size="mini" mode="light" />
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.avgSz}}
							</view>
							<view class="dw">
								mmHg
							</view>
						</view>
						<view class="info" v-if="infoData.avgSz != 0 && infoData.avgSz != '' && infoData.avgSz != null">
							平均舒张压<u-tag class="ml15" :text="infoData.avgSzStatus==0?'偏低':infoData.avgSzStatus==1?'偏高':'正常'" :type="infoData.avgSzStatus==0?'warning':infoData.avgSzStatus==1?'error':'primary'" size="mini" mode="light" />
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.maxSs}}
							</view>
							<view class="dw">
								mmHg
							</view>
						</view>
						<view class="info" v-if="infoData.maxSs != 0 && infoData.maxSs != '' && infoData.maxSs != null">
							最高收缩压<u-tag class="ml15" :text="infoData.maxSsStatus==0?'偏低':infoData.maxSsStatus==1?'偏高':'正常'" :type="infoData.maxSsStatus==0?'warning':infoData.maxSsStatus==1?'error':'primary'" size="mini" mode="light" />
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.maxSz}}
							</view>
							<view class="dw">
								mmHg
							</view>
						</view>
						<view class="info" v-if="infoData.maxSz != 0 && infoData.maxSz != '' && infoData.maxSz != null">
							最高舒张压<u-tag class="ml15" :text="infoData.maxSzStatus==0?'偏低':infoData.maxSzStatus==1?'偏高':'正常'" :type="infoData.maxSzStatus==0?'warning':infoData.maxSzStatus==1?'error':'primary'" size="mini" mode="light" />
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.minSs}}
							</view>
							<view class="dw">
								mmHg
							</view>
						</view>
						<view class="info" v-if="infoData.minSs != 0 && infoData.minSs != '' && infoData.minSs != null">
							最低收缩压<u-tag class="ml15" :text="infoData.minSsStatus==0?'偏低':infoData.minSsStatus==1?'偏高':'正常'" :type="infoData.minSsStatus==0?'warning':infoData.minSsStatus==1?'error':'primary'" size="mini" mode="light" />
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.minSz}}
							</view>
							<view class="dw">
								mmHg
							</view>
						</view>
						<view class="info" v-if="infoData.minSz != 0 && infoData.minSz != '' && infoData.minSz != null">
							最低舒张压<u-tag class="ml15" :text="infoData.minSzStatus==0?'偏低':infoData.minSzStatus==1?'偏高':'正常'" :type="infoData.minSzStatus==0?'warning':infoData.minSzStatus==1?'error':'primary'" size="mini" mode="light" />
						</view>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="title _df _ac">
					<image src="@/static/img/index/tIcon2.png" mode=""></image>
					血压分布
				</view>
				<view class="con _df _jb _ac">
					<view class="jdt1" :style="{width:width1}">
						
					</view>
					<view class="jdt2" :style="{width:width2}">
						
					</view>
				</view>
				<view class="list">
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.minCount}}
							</view>
							<view class="dw">
								次
							</view>
						</view>
						<view class="info info2">
							偏低{{width1}}
						</view>
					</view>
					<view class="item">
						<view class="num-box _df">
							<view class="num">
								{{infoData.maxCount}}
							</view>
							<view class="dw">
								次
							</view>
						</view>
						<view class="info info3">
							偏高{{width2}}
						</view>
					</view>
				</view>
			</view>
			<view class="box3 _df _jb _ac" @click="toAdd">
				<image src="@/static/img/index/tIcon3.png" mode=""></image>
				<view class="" style="margin-right: auto;">
					手动添加值
				</view>
				<u-icon name="arrow-right" color="#888" size="28"></u-icon>
			</view>
			<view class="box3 _df _jb _ac" @click="toView">
				<view class="">
					了解血压
				</view>
				<u-icon name="arrow-right" color="#888" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from "moment";
	
	export default {
		data() {
			return {
				myChart:null,
				chartInstance: null,
				option:{},
				high:0.5,
				low:0.5,
				page:{
					begin: "",
					end: ""
				},
				xData:[],
				yData:[],
				yData2:[],
				format:'HH:mm',
				dateType:'日',
				infoData:{},
				topData:{},
				sum:0,
				min:'',
				max:'',
				isEmpty:true,
				chartData:{},
				tipList:[],
				glTitle:'今日概览',
				yMax:150,
				yMin:0,
			}	
		},
		computed:{
			width1(){
				let width = 0
				if(this.infoData.minCount && this.infoData.minCount !=0){
					width = (this.infoData.minCount / this.sum * 100).toFixed(2)
				}
				
				return width+'%'
			},
			width2(){
				let width = 0
				if(this.infoData.maxCount && this.infoData.maxCount !=0){
					let width = (this.infoData.maxCount / this.sum * 100).toFixed(2)
				}
				return width+'%'
			},
		},
		watch:{
			isEmpty(v){
				this.isEmpty = v
			}
		},
		created() {
			
			
		},
		mounted() {
			
		},
		onReady() {
			// this.initChart();
		},
		onLoad() {
			// this.$nextTick(()=>{
			// 	this.initChart2();
			// })
			
		},
		onShow() {
			this.getData()
		},
		
		methods: {
			getData(){
				let that = this
				this.chartData = {}
				uni.$_post({
					url: "getBloodPressure",
					that: that,
					params: that.page,
					success(res) {
						if(res.code == 0){
							
							// that.option.xAxis.data = chartData.dateList
							// that.option.series[0].data = chartData.dataList.SS
							// that.option.series[1].data = chartData.dataList.SZ
							// that.$refs.chartRef.setOption(that.option)
							console.log(res)
							if(res.data.one){
								that.chartData = res.data.one;
							}
							if(res.data.topData.createTime){
								res.data.topData.createTime = uni.$_momentTime(res.data.topData.createTime,'HH:mm')
							}
							if(that.dateType != '日'){
								// res.data.topData.value = res.data.two.minSs + '-' +res.data.two.maxSs
								res.data.topData.value = ''
							}
							if(that.dateType == '日'){
								if(that.chartData.dataList.SS[0]){
									that.min = uni.$_momentTime(that.chartData.dataList.SS[0][0])
								}
								that.max = uni.$_momentTime(that.page.begin,'YYYY-MM-DD 23:59:59')
							}else{
								that.min = uni.$_momentTime(that.page.begin,'YYYY-MM-DD HH:mm:ss')
								that.max = uni.$_momentTime(that.page.end,'YYYY-MM-DD HH:mm:ss')
							}
							that.topData = res.data.topData;
							if(res.data.two){
								that.infoData = res.data.two;
								// that.yMin = res.data.two.minSz
								// that.yMax = res.data.two.maxSs
							}
							that.sum = that.infoData.maxCount + that.infoData.minCount
							that.initChart(that.chartData);
						}else{
							uni.showToast({
								title: res.msg,
								duration: 2000,
								icon:'error'
							});
						}
					},
					fail(err) {
						uni.showToast({
							title: err.msg,
							duration: 1000,
							icon:'error'
						});	
					},
				});
			},
			toAdd(){
				uni.navigateTo({
					url:'/pages/comA/xueya/view'
				})
			},
			toView(){
				uni.navigateTo({
					url:'/pages/comA/details?title=了解血压' + '&type=3697'
				})
			},
			timeBack(e) {
				if(e.dateTxt == '周'){
					this.format = 'MM-DD'
					this.glTitle = '本周概览'
				}else if(e.dateTxt == '月'){
					this.format = 'MM-DD'
					this.glTitle = '本月概览'
				}else{
					this.format = 'HH:mm'
					this.glTitle = '今日概览'
				}
				this.dateType = e.dateTxt
				this.page.begin = e.sTime
				this.page.end = e.eTime
				
				this.getData()
				// this.initChart()
				
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(this.$echarts);
				// this.initChart()
				chart.setOption(this.option)
			},
			initChart(chartData) {
				let dataZoom = []
				let yData = chartData.dataList.SS
				let yData2 = chartData.dataList.SZ
				if(!yData || !yData2 || yData.length==0 || yData2.length==0) {
					this.isEmpty = true
					this.$refs.chartRef.clear()
					// return
					dataZoom = []	
				}else{
					this.isEmpty = false
					if(this.dateType != '周'){
						dataZoom = [
						    {
						      type: 'inside',
						      start: 0,
						      end: 55,
							  show :false
						    },
						    {
						      start: 0,
						      end: 50,
							  show :false
						    },
							
						  ]
					}
				}
				let that = this
				this.option={
					grid: {
						left: '6%',
						right: '2%',
						bottom: '4%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis',
						triggerOn:'click',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
							label:{
								show: false,
							}
						},
						confine: true,
						formatter: function (params) {
							// params 是一个数组，数组中包含每个系列的数据信息
							let result = '';//收缩压信息窗结果
							let result2 = '';//舒张压信息窗结果
							let arr = []//总数组
							arr = params
							// console.log(arr,999)
							let valArr = []//收缩压数组
							let valArr2 = []//舒张压数组
							let newArr = []//收缩压时间相同数组
							let newArr2 = []//舒张压时间相同数组
							let marker1,marker2
							let seriesName1 = ''
							let seriesName2 = ''
							let name = ''//时间
							arr.forEach(function (item) {
								// item 是每一个系列的数据
								const seriesName = item.seriesName; // 系列名称
								 // 数据值
								 let value = ''
								if(that.dateType != '日'){
									value = item.value[0].split(' ')[0];
									name = item.value[0].slice(0,10)
								}else{
									value = item.value[0];
									name = item.value[0]
								}
								const value2 = item.value[1] // 数据值
								
								let obj = {
									time:value,
									val:value2
								}
								if(seriesName == '舒张压(低压)'){
									valArr.push(obj)
									seriesName1 = '舒张压'
									marker1 = item.marker;
								}else{
									valArr2.push(obj)
									seriesName2 = '收缩压'
									marker2 = item.marker
								}
								 // 标志图形
								// console.log(value,633)
								result += `${item.marker}${seriesName}: ${value}   ${value2}`;
							});
							let newVal = []
							let newVal2 = []
							newArr = valArr.filter((item, index) => valArr.indexOf(item.time) !== index)
							newArr2 = valArr2.filter((item, index) => valArr2.indexOf(item.time) !== index)
							newArr.map(item =>{
								newVal.push(item.val)
							})
							newArr2.map(item =>{
								newVal2.push(item.val)
							})
							const max = Math.max(...newVal);
							const max2 = Math.max(...newVal2);
							const min = Math.min(...newVal);
							const min2 = Math.min(...newVal2);
							// console.log(valArr,111)
							// console.log(valArr2,222)
							// console.log(newArr,333)
							// console.log(max,'最大')
							// console.log(min,'最小')
							if(arr.length<=2){
								result = `${marker1}${seriesName1}: ${min}`;
								result2 = `${marker2}${seriesName2}: ${min2}`;
							}else{
								result = `${marker1}${seriesName1}: ${min}-${max}`;
								result2 = `${marker2}${seriesName2}: ${min2}-${max2}`;
							}
							return name +'\n' + result + '\n' +  result2;
							
							
						}
					},
					legend: {
						show: true ,
						top:10,
						itemGap:40,
						data: ['收缩压(高压)', '舒张压(低压)']
					},
					color: ['#FF4651','#00b7ff'],
					xAxis: {
						// show:that.isEmpty?false:true,
						type: 'time',
						boundaryGap: false,
						splitLine: {     
							show: false   //隐藏x轴那条线
						},
						axisPointer: {
							type: 'shadow' // 阴影指示器
						},
						min:that.min,
						max:that.max,
						axisTick: {
							show: false   //隐藏x轴的刻度
						},
						axisLine: {
							show: false   
						},
						// splitNumber: 7,
						axisLabel: {
							showMaxLabel: true,
							interval: 'auto',
							boundaryGap: false,
							textStyle: {
							    color: "#999",
							    fontSize: '10',
							    lineHeight: 36,
							},
						  // 格式化x轴显示
						  formatter: function(value, index) {
							return moment(value).format(that.format);
						  }
						},
						// data: xData,
						
					},
					yAxis: {
						type: 'value',
						position: 'right',
						max:200,
						min:40,
						interval:40,
						axisLabel: {
							textStyle: {
								color: "#999",
								fontSize: '12',
							},
						},
						axisLine: {
							show: false,
							lineStyle:{
								color:"#999"
							}
						},
						
					},
					dataZoom: dataZoom,
					series: [
						{
							symbolSize: 5,
							data: yData2,
							name: '收缩压(高压)',
							type: 'scatter',
							
						},
						{
							symbolSize: 5,
							data: yData,
							name: '舒张压(低压)',
							type: 'scatter'
						},
					]
				},
				this.$refs.chartRef.init(this.$echarts, chart=> {
					chart.setOption(this.option);
				});
				setTimeout(() =>{
					this.$refs.chartRef.setOption(that.option)
				},200)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 100rpx;

		.chart-box {

			// padding: 0 30rpx;
			.title {
				// margin-bottom: 10rpx;
				line-height: 70rpx;
			}

			.num {
				font-size: 68rpx;
				font-family: $uni-font-family-Bold;
				color: #000;
			}

			.dw {
				font-size: 24rpx;
				font-family: $uni-font-family-Medium;
				color: #000;
				line-height: 90rpx;
				margin-left: 10rpx;
			}

			.time {
				font-size: 24rpx;
				font-family: $uni-font-family-Medium;
				color: #8F8F8F;
				margin-bottom: 10rpx;
			}

			.chart {
				width: 100%;
				height: 600rpx;
				// margin-top: -60rpx;
				margin-bottom: 30rpx;
			}
		}
		.box2{
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
			padding: 40rpx 30rpx 10rpx;
			margin-bottom: 30rpx;
			.title{
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #eee;
				color: #171717;
				font-family: $uni-font-family-Bold;
				font-size: 28rpx;
				image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}
			.num-box2{
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eee;
				.num{
					font-size: 46rpx;
					font-family: $uni-font-family-Bold;
					color: #171717;
					margin-bottom: 15rpx;
				}
				.txt{
					font-size: 24rpx;
					font-family: $uni-font-family-Medium;
					color: #171717;
				}
				
			}
			.con{
				margin: 40rpx 0 0;
				height: 40rpx;
				border-radius: 20rpx;
				overflow: hidden;
				background-color: #f6f6f6;
				.jdt1{
					height: 40rpx;
					background-color: #00B7FF;
				}
				.jdt2{
					height: 40rpx;
					background-color: #FF4651;
				}
			}
			.info2{
				padding-left: 32rpx;
				position: relative;
				font-family: $uni-font-family-Medium;
				color: #222;
				line-height: 30rpx;
				&::before{
					display: block;
					content: '';
					width: 20rpx;
					height: 20rpx;
					background: #00b7ff;
					border-radius: 6rpx;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -10rpx;
				}
			}
			.info3{
				padding-left: 32rpx;
				position: relative;
				font-family: $uni-font-family-Medium;
				color: #222;
				line-height: 30rpx;
				&::before{
					display: block;
					content: '';
					width: 20rpx;
					height: 20rpx;
					background: #FF4651;
					border-radius: 6rpx;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -10rpx;
				}
			}
			.list{
				padding-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 50%;
					padding-left: 50rpx;
					padding-top: 10rpx;
					box-sizing: border-box;
					margin-bottom: 50rpx;
					position: relative;
					&::before{
						display: block;
						content: '';
						width: 1rpx;
						height: 70rpx;
						background-color: #e2e2e2;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -30rpx;
					}
					.num-box{
						height: 58rpx;
						line-height: 58rpx;
						font-family: $uni-font-family-Bold;
						font-size: 50rpx;
						color: #171717;
						
						.dw{
							font-size: 24rpx;
							line-height: 70rpx;
							margin-left: 4rpx;
						}
					}
					.info{
						height: 48rpx;
						line-height: 48rpx;
						font-family: $uni-font-family-Medium;
						font-size: 24rpx;
						color: #222;
					}
				}
				.item:nth-child(2),
				.item:nth-child(4){
					&::before{
						display: none;
					}
				}
			}
		}
		.box3{
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
			height: 130rpx;
			padding: 0 30rpx;
			color: #222;
			font-family: $uni-font-family-Bold;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			image{
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>